<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05.react中定义组件--类式组件</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /* 此处一定要写babel */
    //1.创建类式组件
    class MyComponent extends React.Component{
        render(){
            //render是放在哪里的?--类MyComponent的原型对象上,供实例使用.
            //render中的this是谁?--MyComponent的实例对象<=>MyComponent组件实例对象
            /******props: {},refs: {},state:null 组件的三大属性
             * ********/
            console.log("render中的this:",this)
            return <h2>我是用类定义的组件(适用于[复杂的]组件定义)</h2>
        }
    }
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    /**
     * 执行ReactDOM.render (<MyComponent/>,......)之后发生了什么?
     * 1,React解析组件标签,找到了MyComponent组件
     * 2,发现组件式用类定义的,随后new出来的该类的实例,并通过该实例调用到原型上的render方法.
     * 3.将render返回的虚拟DOM转为真实DOM,随后呈现到页面中.
     * 
     * ************/ 
    </script>
</body>

</html>